<template>
    <div>
      <div ref="echartRef" style="width: 800px; height: 400px;"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  import {gettheBusinessman} from "@/api/supplier/orders";
  
  export default {
    name: 'EChartComponent',
    data() {
      return {
        // 图表实例
        echartInstance: null,
        // 初始数据
        data: [],
        maxData: [],
        code2name:[],
        code:0
      };
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.echartInstance = echarts.init(this.$refs.echartRef);
  
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '你说得对但是我要斗蛐蛐'
        },
        xAxis: {
          max: 'dataMax',
        },
        yAxis: {
          type: 'category',
          data: [],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 4, // only the largest 3 bars will be displayed
          axisLabel: {
            interval: 0,
            formatter: function (value) {
              // 将长文本分行显示
              let maxLength = 5;
              let valLength = value.length;
              let rowN = Math.ceil(valLength / maxLength); // 行数
              let ret = "";
              for (let i = 0; i < rowN; i++) {
                let temp = "";
                let start = i * maxLength;
                let end = start + maxLength;
                temp = value.substring(start, end) + "\n";
                ret += temp; // 加上换行符
              }
              return ret;
            },
            rich: {
              align: 'left'
            }
          },
        },
        series: [
          {
            realtimeSort: true,
            name: '销售额',
            type: 'bar',
            data: this.data,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true,
            },
          },
        ],
        legend: {
          show: true,
        },
        animationDuration: 0,
        animationDurationUpdate: 3000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
      };
  
      gettheBusinessman().then(response => {
        console.log(response);
        var i=0;
        this.code2name=[];
        let n=[]
        response.data.forEach((item) => {
          this.maxData.push(item.value);
          this.code2name.push(item.key);
          n.push(item.key);
          i++;
        })
        n = Array.from(new Set(n))
        i=0;
        n.forEach((key) => {
          option.yAxis.data.push(key);
          this.data.push(0);
          for(var j=0;j<this.code2name.length;j++){
            if(this.code2name[j]==key){this.code2name[j]=i;}
          }
          i++;
        });
        this.code=0;
  
        this.echartInstance.setOption(option);
      });
  
      this.updateData();
      this.startDataUpdate();
    },
    methods: {
      generateRandomData() {
        if(this.code>=this.maxData.length){
          return this.data;
        }
        const data = this.data;
        console.log(this.code2name[this.code])
        data[this.code2name[this.code]] += this.maxData[this.code];
        this.code++;
        return data;
      },
      updateData() {
        this.data = this.generateRandomData();
        this.echartInstance.setOption({
          series: [
            {
              data: this.data,
            },
          ],
        });
      },
      startDataUpdate() {
        setInterval(this.updateData, 1000);
      },
    },
    beforeDestroy() {
      // 组件销毁前，销毁ECharts实例
      if (this.echartInstance) {
        this.echartInstance.dispose();
      }
    },
  };
  </script>
  
  <style>
  /* 在这里添加样式 */
  </style>
  